<template>
  <div class="coach-list-page">
    <div class="page-header">
      <h1>专业教练团队</h1>
      <p>认识我们的专业教练团队，选择最适合您的训练指导</p>
    </div>

    <div class="content-card">
      <div class="card-header">
        <h2>教练列表</h2>
        <div class="header-actions">
          <div class="search-box">
            <i class="fas fa-search"></i>
            <input
                v-model="searchQuery"
                type="text"
                placeholder="搜索教练姓名或专长..."
                class="search-input"
            >
          </div>
          <button class="btn-secondary" @click="refreshData">
            <i class="fas fa-sync-alt"></i>
            刷新
          </button>
        </div>
      </div>

      <div class="card-body">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
          <div class="spinner"></div>
          <p>加载中...</p>
        </div>

        <!-- 错误状态 -->
        <div v-if="error" class="error-container">
          <i class="fas fa-exclamation-circle"></i>
          <h3>数据加载失败</h3>
          <p>{{ error }}</p>
          <button @click="refreshData" class="btn-retry">重试</button>
        </div>

        <!-- 教练卡片网格 -->
        <div v-if="!loading && !error && filteredCoaches.length > 0" class="coaches-grid">
          <div
              v-for="coach in filteredCoaches"
              :key="coach.id"
              class="coach-card"
          >
            <div class="coach-image-container">
            <img
                :src="coach.name === '林子健' ? '/src/assets/images/林子健.jpg' : (coach.imageUrl || '')"
                :alt="coach.name"
                class="coach-image"
                @error="handleImageError"
                @load="handleImageLoad"
            >
            <div class="coach-image-placeholder" style="display: none;">
              {{ coach.name.charAt(0) }}
            </div>
            <div class="experience-badge">
              {{ coach.experience }}年经验
            </div>
          </div>

            <div class="coach-info">
              <h3 class="coach-name">{{ coach.name }}</h3>
              <p class="coach-specialty">{{ coach.specialty }}</p>
              <div class="coach-meta">
                <div class="meta-item">
                  <i class="fas fa-star"></i>
                  <span>{{ getExperienceLevel(coach.experience) }}</span>
                </div>
                <div class="meta-item">
                  <i class="fas fa-phone"></i>
                  <span>{{ formatPhone(coach.phone) }}</span>
                </div>
              </div>
              <p v-if="coach.introduction" class="coach-intro">
                {{ truncateText(coach.introduction, 100) }}
              </p>
              <div class="coach-actions">
                <button class="btn-view" @click="viewCoachDetail(coach)">
                  <i class="fas fa-eye"></i>
                  查看详情
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-if="!loading && !error && filteredCoaches.length === 0" class="empty-container">
          <div class="empty-icon">
            <i class="fas fa-user-slash"></i>
          </div>
          <h3 v-if="searchQuery">未找到相关教练</h3>
          <h3 v-else>暂无教练数据</h3>
          <p v-if="searchQuery">请尝试调整搜索关键词</p>
          <p v-else>暂时没有可用的教练信息</p>
          <button v-if="searchQuery" @click="clearSearch" class="btn-clear-search">
            清空搜索
          </button>
        </div>
      </div>
    </div>

    <!-- 教练详情模态框 -->
    <div v-if="selectedCoach" class="modal-overlay" @click="closeModal">
      <div class="modal-content coach-detail-modal" @click.stop>
        <div class="modal-header">
          <h3>教练详情</h3>
          <button class="modal-close" @click="closeModal" aria-label="关闭">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="coach-detail">
            <div class="detail-image">
              <!-- 添加详细日志标记 -->
              <img
                    :src="selectedCoach.name === '林子健' ? '/src/assets/images/林子健.jpg' : (selectedCoach.imageUrl || '')"
                    :alt="selectedCoach.name"
                    class="coach-detail-image"
                    @error="handleImageError"
                    @load="handleImageLoad"
                >
                <div class="coach-detail-image-placeholder" style="display: none;">
                  {{ selectedCoach.name.charAt(0) }}
                </div>
            </div>
            <div class="detail-info">
              <h2>{{ selectedCoach.name }}</h2>
              <div class="detail-meta">
                <div class="detail-item">
                  <strong>专长领域：</strong>
                  <span>{{ selectedCoach.specialty }}</span>
                </div>
                <div class="detail-item">
                  <strong>从业年限：</strong>
                  <span>{{ selectedCoach.experience }} 年</span>
                </div>
                <div class="detail-item">
                  <strong>联系方式：</strong>
                  <span>{{ selectedCoach.phone }}</span>
                </div>
                <div class="detail-item">
                  <strong>经验等级：</strong>
                  <span class="experience-level">{{ getExperienceLevel(selectedCoach.experience) }}</span>
                </div>
              </div>

            </div>
          </div>
          <div class="modal-actions">
            <button class="btn-cancel" @click="closeModal">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'

export default {
  name: 'CoachList',
  setup() {
    const coaches = ref([])
    const loading = ref(false)
    const error = ref('')
    const searchQuery = ref('')
    const selectedCoach = ref(null)

    // 获取教练列表
    const fetchCoaches = async () => {
      loading.value = true
      error.value = ''
      try {
        const response = await fetch('/api/coaches/all')
        if (!response.ok) {
          throw new Error('获取数据失败')
        }
        const result = await response.json()
        if (result.code === 200) {
          coaches.value = result.data
        } else {
          throw new Error(result.message || '获取数据失败')
        }
      } catch (err) {
        error.value = err.message
      } finally {
        loading.value = false
      }
    }

    // 过滤教练列表
    const filteredCoaches = computed(() => {
      if (!searchQuery.value) {
        return coaches.value
      }
      const query = searchQuery.value.toLowerCase()
      return coaches.value.filter(coach =>
          coach.name.toLowerCase().includes(query) ||
          coach.specialty.toLowerCase().includes(query)
      )
    })

    // 刷新数据
    const refreshData = () => {
      fetchCoaches()
    }

    // 查看教练详情
    const viewCoachDetail = (coach) => {
      selectedCoach.value = coach
    }

    // 预约教练功能已移除

    // 关闭模态框
    const closeModal = () => {
      selectedCoach.value = null
    }

    // 清空搜索
    const clearSearch = () => {
      searchQuery.value = ''
    }

    // 简化的图片加载失败处理
    const handleImageError = (event) => {
      const image = event.target
      console.error('图片加载失败:', image.src)
      
      // 隐藏失败的图片
      image.style.display = 'none'
      
      // 直接显示下一个元素作为占位符
      const placeholder = image.nextElementSibling
      if (placeholder) {
        placeholder.style.display = 'flex'
      }
    }

    // 获取经验等级
    const getExperienceLevel = (experience) => {
      if (experience >= 8) return '资深专家'
      if (experience >= 5) return '高级教练'
      if (experience >= 3) return '中级教练'
      return '初级教练'
    }

    // 格式化手机号
    const formatPhone = (phone) => {
      return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')
    }

    // 截断文本
    const truncateText = (text, maxLength) => {
      if (text.length <= maxLength) return text
      return text.substring(0, maxLength) + '...'
    }

    // 图片加载成功处理
    const handleImageLoad = (event) => {
      console.log('图片加载成功:', event.target.src)
    }

    onMounted(() => {
      fetchCoaches()
    })

    return {
      coaches,
      loading,
      error,
      searchQuery,
      selectedCoach,
      filteredCoaches,
      refreshData,
      viewCoachDetail,
      closeModal,
      clearSearch,
      handleImageError,
      getExperienceLevel,
      formatPhone,
      truncateText,
      handleImageLoad
    }
  }
}
</script>

<style scoped>
.coach-list-page {
  padding: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1f35 0%, #0f172a 100%);
  color: #e2e8f0;
}

.page-header {
  margin-bottom: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.page-header h1 {
  color: #f8fafc;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.025em;
}

.page-header p {
  color: #94a3b8;
  font-size: 1.125rem;
  margin: 0;
}

.content-card {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(30, 41, 59, 0.5);
}

.card-header h2 {
  color: #f1f5f9;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box i {
  position: absolute;
  left: 1rem;
  color: #64748b;
  z-index: 1;
}

.search-input {
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f8fafc;
  font-size: 0.875rem;
  width: 280px;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.search-input::placeholder {
  color: #64748b;
}

.btn-secondary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.card-body {
  padding: 2rem;
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  color: #94a3b8;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(59, 130, 246, 0.2);
  border-left: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-container p {
  margin: 0;
  font-size: 1.125rem;
}

/* 错误状态 */
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: #f87171;
  background: rgba(248, 113, 113, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.2);
}

.error-container i {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.error-container h3 {
  color: #fca5a5;
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
}

.error-container p {
  margin: 0 0 1.5rem 0;
  color: #fecaca;
  max-width: 400px;
}

.btn-retry {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-retry:hover {
  background: rgba(248, 113, 113, 0.25);
  color: white;
}

/* 教练卡片网格 */
.coaches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.coach-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.coach-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.coach-image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.coach-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.coach-card:hover .coach-image {
  transform: scale(1.05);
}

.coach-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 3rem;
}

.experience-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.coach-info {
  padding: 1.5rem;
}

.coach-name {
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
}

.coach-specialty {
  color: #3b82f6;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.coach-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #cbd5e0;
  font-size: 0.875rem;
}

.meta-item i {
  color: #6b7280;
  width: 16px;
  text-align: center;
}

.coach-intro {
  color: #94a3b8;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
}

.coach-actions {
  display: flex;
  gap: 0.75rem;
}

.btn-view, .btn-book {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-view {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.btn-view:hover {
  background: rgba(59, 130, 246, 0.2);
  transform: translateY(-1px);
}

.btn-book {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-book:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* 空状态 */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.empty-icon {
  font-size: 4rem;
  color: #475569;
  margin-bottom: 1.5rem;
  opacity: 0.7;
}

.empty-container h3 {
  color: #e2e8f0;
  margin: 0 0 0.75rem 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.empty-container p {
  color: #94a3b8;
  margin: 0 0 2rem 0;
  max-width: 400px;
  line-height: 1.6;
}

.btn-clear-search {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-clear-search:hover {
  background: rgba(59, 130, 246, 0.2);
  color: white;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

.coach-detail-modal {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: modal-appear 0.3s ease-out;
}

@keyframes modal-appear {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(30, 41, 59, 0.8);
}

.modal-header h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 600;
}

.modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #cbd5e0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.modal-body {
  padding: 2rem;
}

.coach-detail {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}

.detail-image {
  flex-shrink: 0;
}

.coach-detail-image {
  width: 150px;
  height: 150px;
  border-radius: 12px;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.1);
}

.coach-detail-image-placeholder {
  width: 150px;
  height: 150px;
  border-radius: 12px;
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 3rem;
  border: 3px solid rgba(255, 255, 255, 0.1);
}

.detail-info {
  flex: 1;
}

.detail-info h2 {
  color: #f8fafc;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
}

.detail-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #cbd5e0;
}

.detail-item strong {
  color: #e2e8f0;
  min-width: 80px;
}

.experience-level {
  color: #f59e0b;
  font-weight: 600;
}

.detail-intro h4 {
  color: #f8fafc;
  font-size: 1.125rem;
  margin: 0 0 0.75rem 0;
}

.detail-intro p {
  color: #cbd5e0;
  line-height: 1.6;
  margin: 0;
}

.no-intro {
  color: #94a3b8 !important;
  font-style: italic;
}

.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.btn-cancel, .btn-primary {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.875rem;
}

.btn-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 1.75rem;
  }

  .page-header p {
    font-size: 1rem;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .search-input {
    width: 200px;
  }

  .card-body {
    padding: 1.5rem;
  }

  .coaches-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .coach-detail {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }

  .coach-detail-image,
  .coach-detail-image-placeholder {
    width: 120px;
    height: 120px;
    margin: 0 auto;
  }

  .detail-meta {
    align-items: center;
  }

  .detail-item {
    justify-content: center;
  }

  .modal-content {
    margin: 1rem;
    width: calc(100% - 2rem);
  }

  .modal-header,
  .modal-body {
    padding: 1.25rem;
  }

  .modal-actions {
    flex-direction: column;
  }

  .btn-cancel,
  .btn-primary {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .search-input {
    width: 150px;
  }

  .coach-actions {
    flex-direction: column;
  }

  .btn-view,
  .btn-book {
    width: 100%;
  }

  .coach-image-container {
    height: 160px;
  }

  .coach-info {
    padding: 1.25rem;
  }
}
</style>